<template>
    <div class="teacher-form-list">
        <!-- 头部 -->
        <div class="teacher-header m-center">
            <div class="teacher-search">
                <img src="../../assets/teacher-logo.png" alt="">
            </div>
        </div>

        <!-- 内容 -->
        <div class="m-center teacher-container">
            <div class="left">
                <!-- 提交过申请 -->
                <template v-if="audit !== null">
                    <div class="audit">
                        <i class="iconfont" v-if="audit.status === 0" style="color:#3578ff;">&#58925;</i>
                        <i class="iconfont" v-if="audit.status === 1" style="color:#00b43c;">&#xe819;</i>
                        <i class="iconfont" v-if="audit.status === 2" style="color:#f01414">&#58884;</i>

                        <p class="status-text" v-if="audit.status === 0">审核中</p>
                        <p class="status-text" v-if="audit.status === 1">审核通过</p>
                        <p class="status-text" v-if="audit.status === 2">审核不通过</p>


                        <dl class="audit-list">
                            <dd class="audit-item">
                                <span class="audit-item-title">用户编号：</span>
                                <span>{{userId}}</span>
                            </dd>
                            <dd class="audit-item">
                                <span class="audit-item-title">真实姓名：</span>
                                <span>{{audit.name}}</span>
                            </dd>
                            <dd class="audit-item">
                                <span class="audit-item-title">提交时间：</span>
                                <span>{{audit.gmtCreate}}</span>
                            </dd>
                            <dd class="audit-item" v-if="audit.status === 1 || audit.status === 2">
                                <span class="audit-item-title">审核时间：</span>
                                <span>{{audit.gmtModified}}</span>
                            </dd>
                            <dd class="audit-item" v-if="audit.status === 1 || audit.status === 2">
                                <span class="audit-item-title">审核意见：</span>
                                <span>{{audit.opinion}}</span>
                            </dd>
                        </dl>
                        <div class="audit-btn">
                            <el-button type="primary" @click="viewAudit">查看申请</el-button>
                            <el-button type="primary" :disabled="audit.status === 1" @click="editAudit">修改申请</el-button>
                        </div>
                    </div>

                    <TeacherForm ref="teacherForm" @onSaveSuccess="fetchData" />

                </template>

                <!-- 未提交过申请 -->
                <template v-if="audit === null">
                    <el-form ref="teacherForm"
                             :model="teacherForm"
                             status-icon
                             :rules="teacherRules">

                        <el-form-item prop="userId" label="用户编号">
                            <el-input v-model="teacherForm.userId"
                                      oninput = "value=value.replace(/[^\d]/g,'')"
                                      maxlength="19"
                                      disabled
                                      autocomplete="off"/>
                        </el-form-item>

                        <el-form-item prop="name" label="真实姓名">
                            <el-input v-model="teacherForm.name"
                                      oninput="value=value.replace(/[^\u4E00-\u9FA5]/g, '');"
                                      maxlength="10"
                                      autocomplete="off"/>
                        </el-form-item>

                        <el-form-item prop="intro" label="自身资历">
                            <el-input v-model="teacherForm.intro"
                                      maxlength="100"
                                      show-word-limit
                                      placeholder="请输入自身的资历，头衔，例如：上海师范大学法学院副教授，华东师范大学数学系硕士生导师等。"
                                      type="textarea"
                                      :rows="3"
                                      autocomplete="off"/>
                        </el-form-item>

                        <el-form-item prop="career" label="自身简介">
                            <el-input v-model="teacherForm.career"
                                      maxlength="500"
                                      show-word-limit
                                      placeholder="请输入自身的教育经历，任职地点，工作项目等信息。"
                                      type="textarea"
                                      :rows="8"
                                      autocomplete="off"/>
                        </el-form-item>

                        <el-form-item>
                            <el-button class="teacher-btn" type="primary" @click="addTeacher">提交申请</el-button>
                        </el-form-item>

                    </el-form>
                </template>
            </div>

            <div class="right">
                <TeacherTips></TeacherTips>
            </div>
        </div>
    </div>
</template>

<script>
  import { mapGetters } from 'vuex';
  import { saveAudit, getAuditById} from '@/api/audit';
  import { validNormal,validName } from '@/validate/register';

  export default {
    inject: ['reload'],
    data(){
      //检验资历
      const validateIntro = (rule, value, callback) => {
        if (value.length < 5 || value.length > 100 || !validNormal(value)){
          callback(new  Error("请输入正确的资历，长度要求为5-100，且不能输入特殊字符"))
        }
        else callback()
      }

      //检验简介
      const validateCareer = (rule, value, callback) => {
        if (value.length < 50 || value.length > 500 || !validNormal(value)){
          callback(new  Error("请输入正确的简介，长度要求为50-500，且不能输入特殊字符"))
        }
        else callback()
      }

      //检验姓名
      const validateName = (rule, value, callback) => {
        if (!validName(value)){
          callback(new  Error("请输入正确的姓名，长度要求为2-10，只能输入中文"))
        }
        else callback()
      }

      return{
        teacherForm:{
          userId: this.userId,
          name: '',
          intro: '',
          career: ''
        },
        //检验规则
        teacherRules:{
          intro:[{validator: validateIntro,trigger: 'blur'}],
          career:[{validator: validateCareer,trigger: 'blur'}],
          name:[{validator: validateName,trigger: 'blur'}],
        },
        //是否提交过申请
        audit: {}
      }
    },

    methods: {
      addTeacher(){
        this.$refs.teacherForm.validate((valid) => {
          if (valid) {
			//检验通过
            saveAudit(this.$qs.stringify(this.teacherForm)).then(result => {
              let {code} = result
              if (code === 20000){
                this.$message.success("提交成功，请耐心等待审核")
                this.reload()
              }
              else {
                this.$message.error("提交失败，请检查填写内容是否正确")
              }
            })
          } else {
            return false;
          }
        });
      },
      getAudit(){
        getAuditById(this.userId).then(result => {
          let {code,data} = result
          if (code === 20000){
            this.audit = data.item
          }
        })
      },

      viewAudit(){
        this.$refs.teacherForm.open('view')
      },

      editAudit(){
        this.$refs.teacherForm.open('edit')
      },

      fetchData(){
        this.reload()
      }
    },

    created () {
      this.teacherForm.userId = this.userId
      this.getAudit()
    },

    components:{
      TeacherTips: () => import('@/pages/teacher/teacher-tips'),
      TeacherForm: () => import('@/pages/teacher/teacher-form')
    },

    computed: {
      ...mapGetters({
        'userId': 'id'
      })
    },
  }
</script>

<style scoped>
    .teacher-form-list{
        padding: 20px 0 50px;
    }
    .teacher-search{
        position: relative;
        padding-right: 75px;
        background-color: #fff;
        border-bottom: 1px solid rgba(7,17,27,0.1);
    }
    .teacher-search img{
        width: 274px;
        height: 60px;
    }
    .teacher-container{
        display: flex;
        align-items: flex-start;
        margin-top: 15px;
    }
    .left{
        flex: 1;
    }
    .right{
        margin-left: 30px;
        flex: 0 0 350px;
        width: 350px;
    }
    .teacher-btn{
        width: 160px;
        height: 40px;
        font-size: 16px;
        float: right;
    }
    .audit{
        margin-top: 20px;
    }
    .iconfont{
        margin: 0 auto;
        display: block;
        width: 100px;
        height: 100px;
        font-size: 100px;
    }
    .status-text{
        margin: 8px 0;
        font-size: 24px;
        line-height: 24px;
        color: #07111b;
        text-align: center;
    }
    .status-time{
        font-size: 14px;
        color: #93999f;
        text-align: center;
        margin-top: 10px;
    }
    .audit-list{
        width: 344px;
        margin: 30px auto;
        padding: 12px 36px;
        background-color: #f3f5f7;
    }
    .audit-item{
        font-size: 14px;
        line-height: 36px;
        border-bottom: 1px solid #d9dde1;
        color: #4d555d;
    }
    .audit-item-title{
        display: inline-block;
        width:80px;
        font-weight: 700;
    }
    .audit-btn{
        text-align: center;
    }
</style>
